<template>
	<div>
		<div class="card" style="margin-bottom: 5px">
			<el-input style="width: 240px;margin-right: 10px" v-model="data.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
		<el-button type="primary">查询</el-button>
		<el-button type="warning">重置</el-button>
		</div>
		<div class="card" style="margin-bottom: 5px">
			<el-button type="primary">新 增</el-button>
			<el-button type="warning">批量删除</el-button>
			<el-button type="info">导出</el-button>
			<el-button type="success">导入</el-button>
		</div>
		
		<div class="card" style="margin-bottom: 5px">
			<el-table :data="data.tableData" style="width: 100%">
				<el-table-column prop="date" label="Date" width="180" />
				<el-table-column prop="name" label="Name" width="180" />
				<el-table-column prop="address" label="Address" />
			</el-table>
			<div style="margin-top: 15px">
				<el-pagination
					v-model:current-page="data.pageNum"
					v-model:page-size="data.pageSize"
					:page-size="[5,10,15,20]"
					background
					layout="prev, pager, next, jumper"
					:total="data.total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</div>
	</div>
</template>



<script setup>
import {reactive,onMounted} from 'vue'
import {Search} from '@element-plus/icons-vue'
import request from '@/utils/request.js'
const data=reactive({
	name:null,
	tableData :[
		{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
		{ date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
		{ date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
		{ date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
	],
	pageNum:1,
	pageSize:10,
	total:47
})

onMounted(()=>{
	page()
})

const page=()=>{
	request.get('/book/',data.pageNum=1,data.pageSize=10).then(res=>{
		console.log(res)
	})
}


const handleSizeChange=()=>{

}

const handleCurrentChange=()=>{

}

</script>

<style>

</style>
